import React, { useState, useEffect } from 'react';
import { Layout, Breadcrumb, List, Button, message, Spin } from 'antd';
import Api from '../../../util/apiUrl';
import style from './index.module.css';
const { Content } = Layout;
const Live = (props) => {
  console.log('Guestbook props', props);
  const [dataList, setDataList] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    getDataList();
  }, []);

  // 获取生活列表
  const getDataList = () => {
    Api.liveList()
      .then((res) => {
        console.log('生活列表', res);
        setDataList(res.data.reverse());
      })
      .catch((err) => {
        console.log('获取列表失败', err);
      });
  };

  //   删除生活列表
  const deleteLive = (id) => {
    setIsLoading(true);
    Api.deleteLive(id)
      .then((res) => {
        console.log('删除成功', res);
        setIsLoading(false);
        message.success('删除成功');
        let newDataList = [...dataList];
        newDataList.splice(
          dataList.findIndex((i) => i.id == id),
          1
        );
        setDataList(newDataList);
      })
      .catch((err) => {
        console.log('删除失败', err);
        setIsLoading(false);
        message.error('删除失败');
      });
  };

  // 打开图片
  const openImg = (url) => {
    window.open(url);
  };
  return (
    <>
      {isLoading ? (
        <div className={style.container}>
          <Spin size="large" className={style.spin} />
        </div>
      ) : null}
      <Breadcrumb style={{ margin: '16px 0' }}>
        <Breadcrumb.Item>Home</Breadcrumb.Item>
        <Breadcrumb.Item>生活</Breadcrumb.Item>
        <Breadcrumb.Item>生活列表</Breadcrumb.Item>
      </Breadcrumb>
      <Content
        className="site-layout-background"
        style={{
          margin: 0,
          minHeight: 280,
        }}
      >
        {/* <RedactContent isAlert={true} /> */}
        <List
          size="large"
          //   header={<div>Header</div>}
          //   footer={<div>Footer</div>}
          bordered
          dataSource={dataList}
          renderItem={(item) => (
            <List.Item>
              <div className={style.item}>
                <p>{item.title}</p>
                <p>
                  <span>发布时间 : {item.updateTime}</span>
                  {/* <span>修改时间 : {item.alterTime}</span>
                      <span>是否推荐 : {item.isRecommend == 1 ? '是' : '否'}</span>
                      <span>是否推荐 : {item.isRecommend == 1 ? '是' : '否'}</span>
                      <span>文章类型 : {item.skillTypeId}</span>
                      <span>阅读人数 : {item.people}</span> */}
                </p>
                <p>{item.content}</p>
                <div className={style.imgs}>
                  {item.imgs &&
                    item.imgs.split(',').map((i, idx) => {
                      let ysimg = i.split('.')
                      ysimg[ysimg.length-2]+='ys'
                      ysimg=ysimg.join('.')

                      return (
                      <div
                        key={idx}
                        className={style.img}
                        onClick={() => {
                          openImg(i);
                        }}
                        style={{ backgroundImage: `url('${ysimg}')` }}
                      ></div>
                    )})}
                </div>
                <div>
                  {/* <Button type="primary" onClick={()=>{props.history.push('/admin/alterArticle/'+item.id)}}>修改</Button>&nbsp;&nbsp; */}
                  <Button
                    type="primary"
                    style={{ marginTop: 20 }}
                    danger
                    onClick={() => {
                      deleteLive(item.id);
                    }}
                  >
                    删除
                  </Button>
                </div>
              </div>
            </List.Item>
          )}
        />
      </Content>
    </>
  );
};

export default Live;
